{{extend  './layout.html'}}
<!-- 轮播图 -->
{{block 'block'}}
<div id="carouselExampleIndicators" class="carousel slide container-fluid" data-ride="carousel">
       <ol class="carousel-indicators">
           <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
           <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
           <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
       </ol>
       <div class="carousel-inner">
           <div class="carousel-item active">
               <img class="d-block w-100" src="/images/lar.jpg " style="height: 300px" alt="First slide">
           </div>
           <div class="carousel-item">
               <img class="d-block w-100" src="/images/lar.jpg" style="height: 300px" alt="Second slide">
           </div>
           <div class="carousel-item">
               <img class="d-block w-100" src="/images/lar.jpg" style="height: 300px" alt="Third slide">
           </div>
       </div>
       <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
           <span class="carousel-control-prev-icon" aria-hidden="true"></span>
           <span class="sr-only">Previous</span>
       </a>
       <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
           <span class="carousel-control-next-icon" aria-hidden="true"></span>
           <span class="sr-only">Next</span>
       </a>
   </div>
{{/block}}
{{block  "content"}}

<div class="container">


    <!-- 二级导航 -->
    <!-- <ul class="nav justify-content-center  visible-md-*" style="margin:20px 0">
           {{each nav value index}}
           <li class="nav-item">
             <a class="nav-link active" href="#">{{value.name}}</a>
           </li>
           {{/each}}
         </ul>
   <nav> -->
 
         
            
    <!-- 内容明细卡 -->
    <div class="row">
        <div class="col">

            <div class="card mb-3">
                <a href="/details">
                    <img class="card-img-top" src="/images/lar.jpg" style="height:200px" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                            additional content. This content is a little bit longer.</p>
                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                    </div>
                </a>
            </div>
            <div class="card mb-3">
                <img class="card-img-top" src="/images/lar.jpg" style="height:200px" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                        additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
            <div class="card mb-3">
                <img class="card-img-top" src="/images/lar.jpg" style="height:200px" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                        additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
        <!-- 右边内容 -->
        <div class="col-md-auto right-box">
            <div class="card" style="width: 18rem;">
                <img class="card-img-top" src="/images/lar.jpg" alt="Card image cap">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                        card's content.</p>
                </div>
            </div>
        </div>

    </div>


</div>
{{/block}}

{{block 'js_script'}}
<script>
    require(['jquery', 'bootstrap'], function ($, strap) {
        $('.carousel').carousel({
            interval: 2000
        })
        
        //注册
        var $register = $('#register');
        $register.find('#registerSubmit').on('click',function(){
           $.ajax({
             type:'post',
             url:'/users/register',
             data: {
               userName:$.trim( $register.find('input[name=userName]').val())||'',
               password: $.trim($register.find('input[name=password]').val())||'',
               repetition: $.trim($register.find('input[name=repetition]').val())||''
             },
             success:function(data) {
           //    console.log('data',data);
              if(data.code === 0){
               $register.find('[name=errorMessage]').removeClass('alert-danger alert-success');
               $register.find('[name=errorMessage]').addClass('alert-success');
               $register.find('[name=errorMessage]').show();
               $register.find('[name=errorMessage]').text(data.message);  
               setTimeReload();
              }else {
               $register.find('[name=errorMessage]').removeClass('alert-danger alert-success');
               $register.find('[name=errorMessage]').addClass('alert-danger');
               $register.find('[name=errorMessage]').show();  
               $register.find('[name=errorMessage]').text(data.message);  
              } 
             }
         })
        })
       

        //登陆

        var $login = $('#login');
        $login.find('#loginSubmit').on('click',function(){
           $.ajax({
             type:'post',
             url:'/users/login',
             data: {
               userName:$.trim( $login.find('input[name=userName]').val())||'',
               password:$.trim( $login.find('input[name=password]').val())||''
             },
             success:function(data) {
           //    console.log('data',data);
              if(data.code === 0){
               $login.find('[name=errorMessage]').removeClass('alert-danger alert-success');
               $login.find('[name=errorMessage]').addClass('alert-success');
               $login.find('[name=errorMessage]').show();
               $login.find('[name=errorMessage]').text(data.message);  
               setTimeReload();
              }else {
               $login.find('[name=errorMessage]').removeClass('alert-danger alert-success');
               $login.find('[name=errorMessage]').addClass('alert-danger');
               $login.find('[name=errorMessage]').show();  
               $login.find('[name=errorMessage]').text(data.message);  
              } 
             }
         })
        })
    })
    
    //定时刷新
    function setTimeReload(second){
        var second = second || 600;
       setTimeout(function(){
                   window.location.reload();
               },second)
    }
</script>
{{/block}}